import React from 'react'
import './index.less'

export default class extends React.Component {
  state ={
    activeTab: 0,
    setPwdObj: {
      password: '',
      passwordAgain: '',
      passwordErr: '',
      passwordAgainErr: '',
    },
    editPwdObj: {
      oldPassword: '',
      newPassword: '',
      newPasswordAgain: '',
      oldPasswordErr: '',
      newPasswordErr: '',
      newPasswordAgainErr: '',
    },
  }

  changeTab = index => () => {
    this.setState({ activeTab: index })
  }

  changeInput = (type, subType) => e => {
    this.setState(state => ({
      [type]: {
        ...state[type],
        [subType+'Err']: '',
        [subType]: e.target.value,
      }
    }))
  }
  onBlur = (type, subType) => e => {
    const value = e.target.value
    if(!value) {
      this.setState(state => ({
        [type]: {
          ...state[type],
          [subType+'Err']: '不能为空'
        }
      }))
    }else {
      const temp = this.state[type]
      if(temp.password === temp.passwordAgain || temp.newPassword === temp.newPasswordAgain) {
        if(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(value)) {
          this.setState(state => ({
            [type]: {
              ...state[type],
              [subType+'Err']: ''
            }
          }))
        }else {
          this.setState(state => ({
            [type]: {
              ...state[type],
              [subType+'Err']: '请输入6-20位字母和数字的组合'
            }
          }))
        }
      }else {
        this.setState(state => ({
          [type]: {
            ...state[type],
            passwordAgainErr: '两次密码输入不一致'
          }
        }))
      }
    }
  }

  changeInputOld = e => {
    this.setState(state => ({
      editPwdObj: {
        ...state.editPwdObj,
        oldPassword: e.target.value
      }
    }))
  }

  render() {
    const { activeTab, setPwdObj } = this.state
    return (
      <div className="edit-password">
        <div className="password-tab">
          <span onClick={this.changeTab(0)} className={activeTab===0 ? 'active' : ''}>密码设置</span>
          <span onClick={this.changeTab(1)} className={activeTab===1 ? 'active' : ''}>修改密码</span>
        </div>
        {
          activeTab === 0 ? (
            <div className="password-wrap">
              <div className={`password-item ${setPwdObj.passwordErr ? 'err' : ''}`}>
                <label>输入密码</label>
                <input 
                  type="password" 
                  placeholder="请输入密码（必填项）" 
                  onChange={this.changeInput.bind(this, 'setPwdObj', 'password')}
                  onBlur={this.onBlur('setPwdObj', 'password')}
                  value={setPwdObj.password}
                />
                <span>{setPwdObj.passwordErr}</span>
              </div>
              <div className={`password-item ${setPwdObj.passwordAgainErr ? 'err' : ''}`}>
                <label>再次输入密码</label>
                <input 
                  type="password" 
                  placeholder="请再次输入密码（必填项）"
                  onChange={this.changeInput('setPwdObj', 'passwordAgain')}
                  onBlur={this.onBlur('setPwdObj', 'passwordAgain')}
                  value={setPwdObj.passwordAgain}
                />
                <span>{setPwdObj.passwordAgainErr}</span>
              </div>
            </div>
          ) : (
            <div className="password-wrap">
              <div className={`password-item ${editPwdObj.oldPasswordErr ? 'err' : ''}`}>
                <label>输入旧密码</label>
                <input
                  type="password" 
                  placeholder="请输入旧密码（必填项）" 
                  onChange={this.changeInputOld}
                  onBlur={this.onBlur('editPwdObj', 'oldPassword')}
                />
                <span>{editPwdObj.oldPasswordErr}</span>
              </div>
              <div className={`password-item ${editPwdObj.newPasswordErr ? 'err' : ''}`}>
                <label>输入新密码</label>
                <input 
                  type="password" 
                  placeholder="请输入新密码（必填项）" 
                  onChange={this.changeInput('editPwdObj', 'newPassword')}
                  onBlur={this.onBlur}
                />
                <span>{editPwdObj.newPasswordErr}</span>
              </div>
              <div className={`password-item ${editPwdObj.newPasswordAgainErr ? 'err' : ''}`}>
                <label>确认新密码</label>
                <input 
                  type="password" 
                  placeholder="请再次输入新密码（必填项）" 
                  onChange={this.changeInput('editPwdObj', 'newPasswordAgain')}
                  onBlur={this.onBlur('editPwdObj', 'newPasswordAgain')}
                />
                <span>{editPwdObj.newPasswordAgainErr}</span>
              </div>
            </div>
          )
        }
        <div className="btn-wrap">
          <span>确认</span>
          <span>取消</span>
        </div>
      </div>
    )
  }
}